<template>
  <div class="page">
    <fe-header slot="header" style="width:100%;position:absolute;left:0;top:0px;z-index:100;">Scroll</fe-header>
    <div class="fe-content">
      <div class="scroll-page" >
        <fe-scroll class="page-content"
                :on-refresh="onRefresh"
                :on-infinite="onInfinite"
                :hasHeader="hasHeader">
          <div v-for="(item, index) in items" :key="index" @click.native="onItemClick(index)" class='item' :class="{'item-stable': index % 2 == 0}">
            {{ item }}
          </div>
          <div v-if="infiniteCount >= 2" slot="infinite" class="text-center">没有更多数据</div>
        </fe-scroll>
      </div>
    </div>
  </div>
</template>
<script>
  import {Header, Scroll} from 'feui'
  export default {
    components:{
      [Header.name]:Header,
      [Scroll.name]:Scroll,
    },
    data () {
      return {
        items: [],
        infiniteCount: 0,
        hasHeader:true
      }
    },

    mounted() {
      for (let i = 1; i <= 20; i++) {
        this.items.push(i + ' - With You, Just Do IT.')
      }
      this.top = 1
      this.bottom = 20
    },

    methods: {
      onRefresh(done) {
        setTimeout(() => {
          let start = this.top - 1
          for (let i = start; i > start - 10; i--) {
            this.items.splice(0, 0, i + ' With You, Just Do CSS.')
          }
          this.top = this.top - 10;

          done()
        }, 1500)
      },

      onInfinite(done) {
        setTimeout(() => {
          if (this.infiniteCount < 2) {
            let start = this.bottom + 1
            for (let i = start; i < start + 10; i++) {
              this.items.push(i + ' With You, Just Do JS.')
            }
            this.bottom = this.bottom + 10;

            this.infiniteCount++
          }

          done()
        }, 1500)
      },

      onItemClick(index) {
        console.log(index)
      }
    }

  }
</script>

<style scoped lang="less">
.page,.fe-content{
  height: 100%;
  position: relative;
}
.scroll-page{
  // position: absolute;
  // left: 0;
  // top: 0;
  // bottom: 0;
  // right: 0;
  // width: 100%;
  // height: 100%;
  // background-color: #f5f5f5;
  // overflow: hidden;
  .page-content{
    // padding-top: 46px;
  }
}
.item {
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  color: #444;
  min-height: 50px;
  position: relative;
  z-index: 2;
  display: block;
  margin: -1px;
  padding: 16px;
  background-color: #fff;
}
.item.item-stable {
  border-color: #b2b2b2;
  background-color: #f5f5f5;
  color: #444;
}
</style>
